import { HsAdminCreateDataService } from '@hs-admin/components'
import { Button, Flex } from 'antd'
import React, { useEffect, useRef, useState } from 'react'
import './style.less'
import { HsAdminInput, HsAdminSelect, HsAdminSpin } from '@hs-admin/base-components'
import { BorderInnerOutlined, HistoryOutlined } from '@ant-design/icons'
import { getDataBaseHistoryList, getPublishDataBaseList } from '@/api/overview'
import { useNavigate } from 'react-router-dom'

const Overview: React.FC = () => {
  const navigate = useNavigate()
  const [loading, setloading] = useState(true)
  const createDataServiceRef = useRef<any>({})
  const [dataBaseValue, setdataBaseValue] = useState<string>('349d78e8-9078-4316-9dd2-e272f88c41a1')
  const [keywords, setkeywords] = useState('')
  const [dataBaseOptions, setdataBaseOptions] = useState([])
  const [lastestDataBase, setlastestDataBase] = useState<any[]>([])
  const selectBefore = (
    <HsAdminSelect
      value={dataBaseValue}
      options={dataBaseOptions}
      onChange={(value: React.SetStateAction<string>) => setdataBaseValue(value)}
      allowClear={false}
      style={{ backgroundColor: 'white' }}
    />
  )
  const [keywordsHistory, setkeywordsHistory] = useState<any[]>([])
  const [dataBaseHistory, setdataBaseHistory] = useState<any[]>([])

  const onSearch = (value: string) => {
    navigate(`/Database?id=${dataBaseValue}&keywords=${value}`)
  }
  const toDataItem = (item: { value: any }) => {
    navigate(`/Database?id=${item.value}`)
  }
  const callDataService = () => {
    createDataServiceRef.current.showModal()
  }

  useEffect(() => {
    const init = () => {
      setloading(true)
      // 最新数据库
      getPublishDataBaseList({ page_size: 99 })
        .then((res) => {
          const { items } = res
          if (items.length) {
            setdataBaseOptions(
              items.map((item: { name: any; id: any; ref_table_name: any }) => ({
                label: item.name,
                value: item.id,
                ref_table_name: item.ref_table_name
              }))
            )
            setdataBaseValue(items[0].id)
          }
        })
        .finally(() => {
          setloading(false)
        })
      getDataBaseHistoryList({}).then((res) => {
        // 历史搜索
        setkeywordsHistory([...res.latest_searched_history])
        // 最新数据库
        setlastestDataBase(
          res.latest_released_dataitems.map((item: { name: any; id: any }) => ({
            label: item.name,
            value: item.id
          }))
        )
        // 历史查询数据库
        setdataBaseHistory(
          res.latest_searched_dataitems.map((item: { name: any; id: any }) => ({
            label: item.name,
            value: item.id
          }))
        )
      })
    }

    init()
  }, [])

  return (
    <div className="overview-page-wrapper">
      {loading && <HsAdminSpin />}
      <div className="overview-box-wrapper">
        <h1 className="mb-10 white">火石数据查询</h1>
        <Flex align="center" gap={'middle'} className="w-12/25 mx-auto">
          <HsAdminInput
            Search
            addonBefore={selectBefore}
            value={keywords}
            enterButton="搜索"
            onSearch={onSearch}
            onChange={(e: { target: { value: React.SetStateAction<string> } }) => setkeywords(e.target.value)}
            onPressEnter={(e: { target: { value: string } }) => onSearch(e.target.value)}
          />
          <Button type="primary" onClick={callDataService}>
            提交人工服务订单
          </Button>
        </Flex>
        <Flex className="w-12/25 mx-auto mt-4 white" align="center">
          <span className="flex-none">历史搜索：</span>
          <Flex gap={'small'}>
            {keywordsHistory.map((item, index) => (
              <Button type="link" size="small" key={index} className="white max-w-60 history-name" onClick={() => onSearch(item)}>
                {item}
              </Button>
            ))}
          </Flex>
        </Flex>
        <Flex className="w-12/25 mx-auto mt-32 white" align="center">
          <Flex gap={'small'} justify="flex-end" className="flex-none">
            <BorderInnerOutlined />
            <h2>最新数据库：</h2>
          </Flex>
          <Flex gap={'small'}>
            {lastestDataBase.map((item) => (
              <Button
                type="link"
                size="small"
                key={item.value}
                onClick={() => toDataItem(item)}
                className="white cursor-pointer max-w-60 history-name">
                {item.label}
              </Button>
            ))}
          </Flex>
        </Flex>
        <Flex className="w-12/25 mx-auto mt-6 white" align="center">
          <Flex className="flex-none" gap={'small'} justify="flex-end">
            <HistoryOutlined />
            <h2>历史查询数据库：</h2>
          </Flex>
          <Flex gap={'small'}>
            {dataBaseHistory.map((item) => (
              <Button
                type="link"
                size="small"
                key={item.value}
                onClick={() => toDataItem(item)}
                className="white cursor-pointer max-w-60 history-name">
                {item.label}
              </Button>
            ))}
          </Flex>
        </Flex>
        <HsAdminCreateDataService ref={createDataServiceRef} />
      </div>
    </div>
  )
}

export default Overview
